<template>

  <div>
    <div class="header_con">
      <div class="header">
        <div class="welcome fl">欢迎来到美多商城!</div>
        <div class="fr">
          <div class="user_link fl">
            <span>|</span>
            <a href="user_center_info.html">用户中心</a>
            <span>|</span>
            <a href="cart.html">我的购物车</a>
            <span>|</span>
            <a href="user_center_order.html">我的订单</a>
          </div>
        </div>
      </div>
    </div>

    <div class="search_bar clearfix">
      <a href="index.html" class="logo fl"><img src="/static/images/logo.png"></a>
      <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;支付完成</div>
      <form method="get" action="/search.html" class="search_con fr mt40">
        <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
        <input type="submit" class="input_btn fr" name="" value="搜索">
      </form>
    </div>


    <div class="common_list_con clearfix">
      <div v-if="trade_id" class="order_success">
        <p><b>订单支付成功</b></p>
        <p>您的订单已成功支付，支付交易号：{{trade_id}}</p>
        <p><a href="/user/center/order/">您可以在用户中心中我的订单中查看该订单</a></p>
      </div>
      <div v-else>请稍等, 正在处理您的订单</div>
    </div>

    <div class="footer">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>
  </div>


</template>

<script>
  export default {
    name: "PaymentCallBack",
    data() {
      return {
        host: host,
        user_id: localStorage.user_id,
        token: localStorage.token,
        username: localStorage.username,
        query: '',  // 所有回调信息, 支付宝发给我们前端页面的支付成功的信息
        trade_id: ''
      }
    },
    created() {
      this.query = this.$route.query
      console.log(this.$route.query)
      this.update_order()
    },
    methods: {
      update_order() {
        this.axios.get(this.host + '/payment/status/', {
          params: this.query,
          responseType: 'json',
          headers: {
            'Authorization': 'JWT ' + this.token
          }
        }).then(response => {
          // debgger
          alert(response.data.msg)
          this.order_id = response.data.order_id
          location.href = '/user/center/order/';

          if (response.data.code == 999) {
            alert(response.data.msg)
          }
        }).catch(error => {
          console.log(error.response.data);
          alert('服务器异常');
        })

      }
    }
  }
</script>

<style scoped>

</style>
